﻿@{
    ViewBag.Title = "Pop";
}
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/age.ui.qna.model.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/age.ui.qna.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/age.ui.qna.category.js")" type="text/javascript" ></script>
<script type="text/javascript">

	$(function () {



		// submit form.
		$('form').submit(function () {

			// Instantiate the model
			var entity = QnaModel.QnaEntity;

			// Bind to QNA data
			// TODO[P1]: Get categories and assign
			var categoryIDs = [];

			$('#categoryID:checked').each(function (index) {
				categoryIDs[index] = parseInt($(this).val());
			});

			if (categoryIDs.length == 0) categoryIDs = [4, 5, 8, 9];
			entity.QuestionData.CategoryID = categoryIDs; // [4, 5, 7, 9, 10, 23, 14, 15];

			// Finally bind
			$(this).bindQnaForm({ containerId: 'qnaContainer', model: entity, debug: false });

			// TODO[P1]: Create validation rules
			if ($(this).valid()) {
				$.ajax({
					url: "/Question/Save",
					type: "POST",
					data: { data: JSON.stringify(entity) },
					success: function (result) {

						alert(result.toLowerCase().indexOf('error'));

						if (result.toLowerCase().indexOf('error') == -1) {

							$('#result').html(result);
							$('#qnaContainer').html('');
							// Create a link to create a new question.
							var s = $('#result span:contains("create a new question")');
							var v = s.text();
							s.html('');
							var t = document.createElement('a');
							$(t).attr('href', '/Question/Pop')
								.html(v)
								.appendTo(s);
						} else {
							$('#result').html(result).css('color', '#f00');
						}
					},
					error: function (d) {
						alert('fail');
					}
				});
			}
			return false;
		});



		/// show or hide the delete button.
		$('#editquestion').click(function () {
			if ($('.qEditElement').is(':visible')) {
				$('.qEditElement').slideUp('fast');
			} else {
				$('.qEditElement').slideDown('fast');
			}
		});

		$('#addanswerchoice').click(function () {
			$(this).addChoice('qAnswerPanel');
		});

		$('#getdata').click(function () {

			var val = '';
			var x = [];

			$('#categoryID:checked').each(function (index) {
				val += '(' + index + ')' + $(this).val() + ', ';
				x[index] = $(this).val();
			});

			alert(x.length);

		});

		// Load on start:
		$(document).addQuestion('qQuestionPanel');
		$(document).addChoice('qAnswerPanel');
		
		$(document).displayCategorySelectionPanel({
			dimensionUnit: 'px',
			width: 250,
			cols: 3,
			parentContainer: '#categoryMainPanel',
			indent: 0,
			titleText: 'Enter a category',
			debug: false
		});

		

	});

</script>
<h2>Pop a question?</h2>
@using (Html.BeginForm())
{
<div id="result"></div>
<div id="qnaContainer">


	<div id="qQuestionPanel"></div>
	<div id="qAnswerPanel"></div>
	<div id="categoryContainer" class="qContainer" style="overflow: auto;">
	<div id="categoryMainPanel">
	</div>
</div>
	@*<div id="qAgreement">
	// TODO[P1]: Implement agreement.
	</div>*@
	<div id="qControlPanel">
		<input type="button" id="addanswerchoice" name="addanswerchoice" value="Add answer" class="qbutton" />
		<input type="submit" id="savequestion" name="savequestion" value="Save" class="qbutton" />
		<input type="button" id="editquestion" name="editquestion" value="Edit" class="qbutton" />
	</div>
</div>
}

